<template>
  <div class="exchange_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('Huazhuan.transfer')" v-if="isDayTime === false" title_color="#fff" :class="themeClass">
      <a @click="$router.push('/mine/hzjl')" :class="bgColor">{{ $t('Huazhuan.transfer record') }}</a>
    </v-nav>
    <v-nav :title="$t('Huazhuan.transfer')" v-if="isDayTime === true">
      <a @click="$router.push('/mine/hzjl')" :class="bgColor">{{ $t('Huazhuan.transfer record') }}</a>
    </v-nav>
    <div class="exchange_mod_box">
      <div class="exchange_mod_box_exchange-type">
        <van-field class="input" readonly clickable name="picker" :value="exchangeBefore.text" @click="showPicker1 = true" />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker show-toolbar :columns="hzlist" @confirm="onBeforeConfirm" @cancel="showPicker1 = false" :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
        </van-popup>
        <img src="@/assets/img/Swap@2x.png" alt="" />
        <van-field class="input" readonly clickable name="picker" :value="exchangeAfter.text" @click="showPicker2 = true" />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker show-toolbar :columns="hzlist1" @confirm="onAfterConfirm" @cancel="showPicker2 = false" :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
        </van-popup>
      </div>

      <div class="exchange_mod_box_exchange-quantity">
        <p>{{ $t('Huazhuan.Select currency') }}</p>
        <van-divider />
        <van-field class="input" readonly clickable name="picker" :value="exchangetype.text" @click="showPicker3 = true">
          <template #label>
            <img :src="logo_link" alt="" />
          </template>
        </van-field>
        <van-popup v-model="showPicker3" position="bottom">
          <van-picker show-toolbar :columns="bizhonglist" @confirm="onAfterConfirmt" @cancel="showPicker3 = false" :confirm-button-text="$t('info.info10')" :cancel-button-text="$t('info.info11')" />
        </van-popup>
      </div>
      <div class="exchange_mod_box_exchange-quantity">
        <p>{{ $t('Huazhuan.Transfer quantity') }}</p>
        <van-divider />
        <van-field v-model="exchangeNum" @input="handlePrice(exchangeNum)" :placeholder="$t('Huazhuan.Please enter the transfer amount')">
          <template #label>
            <img src="@/assets/img/Database@2x.png" alt="" />
          </template>
          <template #button>
            <span @click="exchangeNum = allprice">{{ $t('Huazhuan.Transfer all') }}</span>
          </template>
        </van-field>
        <span>{{ $t('Huazhuan.Available') }}:</span>
        {{ allprice }} {{ exchangetype.text }}
      </div>
    </div>
    <div class="moomoo-bottom">
      <div class="moomoo-bottom-submit">
        <van-button color="#DAAB51" round block @click="submit">{{ $t('Huazhuan.Confirm transfer') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Exchange',
  data() {
    return {
      exchangeBefore: {}, // 第一个
      exchangeAfter: {}, // 第二个
      exchangetype: {}, //币种选择
      exchangeNum: '', //输入余额
      allprice: 0, //当前余额
      hzlist: [
        { text: this.$t('Huazhuan.Capital account'), id: 0 },
        { text: this.$t('Huazhuan.transaction account'), id: 1 }
      ], // 第一个列表
      hzlist1: [
        { text: this.$t('Huazhuan.transaction account'), id: 1 },
        { text: this.$t('Huazhuan.Capital account'), id: 0 }
      ], // 第二个列表
      bizhonglist: [], //币种列表
      showPicker1: false, // 第一个选择框显示
      showPicker2: false, // 第二个选择框显示
      showPicker3: false, // 第三个选择框显示
      logo_link: '',
      isDayTime: false,
      loading: false
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  created() {
    this.getTransferCurrency()
  },
  methods: {
    // 获取可划转币种
    getTransferCurrency() {
      this.$https.get('/platform/getTransferCurrency').then(res => {
        if (res != undefined && res.code == 1) {
          let data = res.data
          this.bizhonglist = data.map(item => {
            return {
              id: item.id,
              text: item.currencies_name,
              logo_link: item.currencies_logo
            }
          })
          this.exchangeBefore = this.hzlist[0]
          this.exchangeAfter = this.hzlist1[0]
          this.exchangetype = this.bizhonglist[0]
          this.logo_link = this.bizhonglist[0].logo_link
          this.getExchangeRate()
        }
      })
    },
    // 获取币种余额
    getExchangeRate() {
      this.$https.get('/wallet/currencyBalance?type=' + this.exchangeBefore.id + '&currency=' + this.exchangetype.text).then(res => {
        if (res != undefined && res.code == 1) {
          this.allprice = res.data
        }
      })
    },
    // 第一个选择确认
    onBeforeConfirm(value) {
      if (this.exchangeBefore.id == value.id) {
        this.showPicker1 = false
        return
      }
      if (value.id == this.exchangeAfter.id) {
        this.exchangeAfter = this.exchangeBefore
      }
      this.exchangeBefore = value
      this.showPicker1 = false
      this.getExchangeRate()
    },
    // 第二个选择确认
    onAfterConfirm(value) {
      if (this.exchangeAfter.id == value.id) {
        this.showPicker2 = false
        return
      }
      if (value.id == this.exchangeBefore.id) {
        this.exchangeBefore = this.exchangeAfter
      }
      this.exchangeAfter = value
      this.showPicker2 = false
      this.getExchangeRate()
    },
    // 第三个个选择确认
    onAfterConfirmt(value) {
      this.exchangetype = value
      this.showPicker3 = false
      this.logo_link = value.logo_link
      this.getExchangeRate()
    },
    // 限制保留八位小数
    handlePrice(val) {
      if (val !== '' && val.substr(0, 1) === '.') {
        val = ''
      }
      val = val.replace(/^0*(0\.|[1-9])/, '$1') //解决 粘贴不生效
      val = val.replace(/[^\d.]/g, '') //清除“数字”和“.”以外的字符
      val = val.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      val = val.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3') //只能输入八个小数
      if (val.indexOf('.') < 0 && val !== '') {
        if (val.substr(0, 1) === '0' && val.length === 2) {
          val = val.substr(1, val.length)
        }
      }
      if (+val > +this.allprice) {
        val = this.allprice
      }
      this.exchangeNum = val
    },
    // 提交
    async submit() {
      if (!this.exchangeNum || this.exchangeNum <= 0) {
        this.$toast(this.$t('Huazhuan.Please enter the transfer amount'))
        return
      }
      this.loading = true
      let params = {
        from_type: this.exchangeBefore.id,
        reach_type: this.exchangeAfter.id,
        currency: this.exchangetype.text,
        amount: this.exchangeNum
      }
      await this.$https.post('/Wallet/currencyTransfer', params).then(res => {
        if (res != undefined && res.code == 1) {
          this.exchangeNum = ''
          this.getExchangeRate()
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('~assets/less/vant-form.less');
@import url('~assets/less/index.less');
@import url('./index.less');
</style>
